//客户端代码打包 development
const path = require('path');
const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const baseConfig = require('./webpack.base');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const LessPluginFunctions = require('less-plugin-functions');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const  config = webpackMerge(baseConfig, {
    mode: 'development',
    output: {
        publicPath: '/',
        filename: '[name].js',
        path: path.join(__dirname, './dist'),
        libraryTarget: 'var',
        library: '_dll_vendors'
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        hot: true,
        // host: '172.20.10.2',
        // progress: true,
        inline: true,
        port: 3010,
        // disableHostCheck: true,
        compress: true,
        //防止history路由刷新找不到路径
        historyApiFallback: true,
        // proxy: {
        //     '/api/*': {
        //         target: 'http://106.15.248.34:8099',
        //         pathRewrite: {
        //             '^/api': ''
        //         }
        //     }
        // }
    },
    entry: {
        client: [
            'react-hot-loader/patch',
            path.resolve(__dirname, '../src/index.tsx')
        ],
        lib: ["antd"]
    },
    //请查看webpack上的sourceMap说明
    devtool: 'cheap-module-eval-source-map',
    module: {
        rules: [
            {
                test:/\.(js|jsx|ts|tsx)$/,
                exclude: /node_modules/,
                use: 'happypack/loader?id=babel'
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader, //单独生成css文件
                    {
                        loader: 'css-loader',
                        options: {
                            //是否使用sourceMap
                            sourceMap: true
                        }
                    }
                ]
            },
            {
                test: /\.(scss|sass)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            modules: {
                                localIdentName: '[local]-[hash:base64:5]',
                            }
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },
            {
                test: /\.less$/,
                include: [
                  path.resolve(__dirname, '..', 'src/pages'),
                  path.resolve(__dirname, '..', 'src/components'),
                  path.resolve(__dirname, '..', 'src/static'),
                  path.resolve(__dirname, '..', 'src/widgets'),
                ],
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            modules: {
                                localIdentName: '[local]-[hash:base64:5]',
                            }
                        },
                    },
                    {
                        loader: 'resolve-url-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader:'less-loader',
                        options: {
                            plugins: [
                                new LessPluginFunctions()
                            ],
                            sourceMap: true
                        }
                    }
                ]
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            inject: true,
            // favicon: './client/static/image/logo.jpg',
            filename: 'index.html',
            hash: true
            // loading: loading
        }),
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./dll/vendors.manifest.json')
        }),
        new AddAssetHtmlPlugin([
            {
                // 要添加到编译中的文件的绝对路径，以及生成的HTML文件。支持 globby 字符串
                filepath: require.resolve('./dll/vendors.dll'),
                // 文件输出目录
                outputPath: './dist',
                // 脚本或链接标记的公共路径
                publicPath: './dist'
            }
        ]),
        new webpack.HotModuleReplacementPlugin(), //热模块替换HMR
        new webpack.NoEmitOnErrorsPlugin(),
        new ForkTsCheckerWebpackPlugin({
            async: true,
            // babel 转换的是我们前端代码，所以是指向前端代码的 tsconfig.json
            typescript: {
                configFile: path.resolve(__dirname, '../tsconfig.json'),
                memoryLimit: 1024
            },
        }),
        new MiniCssExtractPlugin({ // 在plugins中配置属性
            filename: 'css/[name]-[contentHash].css', // 配置提取出来的css名称
            chunkFilename: 'css/chunk-[id].css'
          }),
    ]
});

module.exports = config;
